<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/include.js"></script>
    <script src="/js/element-icons.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <el-input v-model="searchForm.name" placeholder="标题模糊搜索" clearable size="mini" style="width: 200px;"></el-input>
            <el-input v-model="searchForm.path" placeholder="路径模糊搜索" clearable size="mini" style="width: 200px;"></el-input>

            <span >
                <button @click="search" type="button" class="el-button filter-item el-button--success el-button--mini"><!---->
                    <i class="el-icon-search"></i><span>搜索</span>
                </button>

                <button v-if="showButtonAdd" @click="toAddTop" type="button" class="el-button el-button--primary el-button--mini"><!---->
                    <i class="el-icon-plus"></i><span>新增顶级菜单</span>
                </button>
            </span>
        </div>

        <!-- 懒加载刷新问题搞不定，不用懒加载了-->
        <div style="margin-top: 5px;">
            <el-table
                :data="tableDate"
                style="width: 100%;margin-bottom: 20px;"
                v-loading="loading"
                row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            </el-table-column>
                <el-table-column
                        prop="name"
                        label="标题"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="路径">
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序">
                </el-table-column>
                <el-table-column
                            label="图标">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <!--<el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                :active-value="1"
                                :inactive-value="0"
                                inactive-color="#C0CCDA"
                                @change="changeStatus($event,scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>-->
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status" class="el-tag el-tag--success el-tag--small el-tag--light">启用</span>
                        <span v-else class="el-tag el-tag--warning el-tag--small el-tag--light">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.createdTime | dateTimeFormat('yyyy-MM-dd HH:mm:ss')}}
                    </template>
                </el-table-column>


            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="toModify(scope.row)" v-if="showButtonUpdate" type="primary" icon="el-icon-edit" size="mini" title="修改"></el-button>
                    <el-button @click="toAdd(scope.row)" v-if="showButtonAdd" type="primary" icon="el-icon-circle-plus-outline" size="mini" title="新增"></el-button>
                    <template v-if="scope.row.children == null">
                        <el-button v-if="showButtonDelete" type="danger" icon="el-icon-delete" size="mini" title="删除" @click="del(scope.row.id)"></el-button>
                    </template>
                </template>

            </el-table-column>

        </el-table>
        </div>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="55%">

            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-editForm">
                <el-form-item label="标题" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="路由地址" prop="path" >
                    <el-input v-model="editForm.path"></el-input>
                </el-form-item>
                <el-form-item label="图标" prop="icon" >
                    <el-input v-model="editForm.icon" @focus="dialogVisibleIcons=true"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="editForm.sort" :min="1" :max="999" ></el-input-number>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <template v-for="item in statuses">
                        <el-tooltip content="禁用时,该菜单有子菜单,会连其一起禁用" placement="top">
                            <el-radio  v-model="editForm.status" :label="item.value">{{item.label}}</el-radio>
                        </el-tooltip>
                    </template>
                </el-form-item>

                <el-form-item label="上级菜单">
                    <treeselect v-model="editForm.parentId" :options="menuTreeSelect" :clearable="false" placeholder="父节点"/>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                &nbsp;
                <el-button type="primary" @click="submitForm">确 定</el-button>
                &nbsp;
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="图标集合"
                :visible.sync="dialogVisibleIcons"
                :close-on-click-modal="false"
                width="55%"
                height="500px">

            <div style="max-height:300px;overflow:auto">
                <ul class="icons">
                    <template v-for="item in icons">
                        <li>
                            <span>
                                <button type="button" class="el-button" @click="selectIcon(item)"><!---->
                                    <i :class="item"></i>
                                </button>
                            </span>
                        </li>
                    </template>
                </ul>
            </div>
        </el-dialog>

    </div>

    <script>
        Vue.component('treeselect', VueTreeselect.Treeselect);
        let switchList = MY_ENUM.getElOptions("Switch").sort(COMPARE_DESC("value"));
        let switchEnum = MY_ENUM.getEnum("Switch");
        let vm = new Vue({
            el: '#app',
            data: {
                tableDate: [],
                searchForm: {
                    name: "",
                    path: ""
                },
                dialogVisible: false,
                dialogTitle: "",
                editForm: {

                },
                rules: {
                    name: [{ required: true, trigger: 'blur', message: '标题不能为空' }],
                    sort: [{ required: true, trigger: 'blur', message: '排序不能为空' }]
                },
                dialogVisibleIcons: false,
                icons: elementIcons,
                statuses: switchList,
                loading: false,
                menus: [],
                menuTreeSelect: [],
            },
            methods: {
                submitForm() {
                    let that = this;
                    myConfirm("确定提交？", function () {
                        showLoading("保存中....");
                        let url = BASE_PATH + "/menu/update";
                        if (isEmpty(that.editForm.id)) {
                            url = BASE_PATH + "/menu/add";
                        }
                        Vue.delete(that.editForm, "createdTime");

                        myAjax({
                            type: "post",
                            url: url,
                            data: that.editForm,
                            isJson: true,
                            callback: function () {
                                hideLoading();
                                successMessage("提交成功！");
                                that.dialogVisible = false;
                                that.loadTableData();
                            }
                        })
                    });
                },
                selectIcon(icon){
                    this.editForm.icon = icon;
                    this.dialogVisibleIcons = false;
                },
                search(){
                    this.loadTableData();
                },
                loadTableData() {
                    let that = this;
                    this.loading = true;
                    myAjax({
                        type: "get",
                        url: BASE_PATH + "/menu/list",
                        data: {
                            name: this.searchForm.name,
                            path: this.searchForm.path
                        },
                        callback: function (data) {
                            // 添加label属性 把name值赋给它。
                            for (let i = 0; i < data.length; i++) {
                                data[i].label = data[i].name;
                            }
                            that.menus = JSON.parse(JSON.stringify(data));
                            that.tableDate = toTree(data);
                            that.loading = false;
                        }
                    });
                },
                toModify(obj){
                    this.dialogTitle = "编辑菜单";
                    this.editForm = JSON.parse(JSON.stringify(obj));

                    let that = this;
                    that.menuTreeSelect = [];

                    let menus = JSON.parse(JSON.stringify(that.menus));
                    if (obj !== undefined) {
                        // 将当前修改的值设置为不可选自己 isDisabled: true
                        for (let i = 0; i < menus.length; i++) {
                            menus[i].isDisabled = menus[i].id === obj.id;
                        }
                    }

                    that.menuTreeSelect = toTree(menus);
                    that.menuTreeSelect.push({id: 0, label: "顶级菜单"});

                    this.dialogVisible = true;
                },
                toAdd(obj){
                    this.dialogTitle = "新增菜单";
                    this.editForm = {
                        parentId: obj.id,
                        parentName: obj.name,
                        status: this.statuses[0].value,
                        sort: 999
                    };
                    let that = this;
                    that.menuTreeSelect = [];

                    let menus = JSON.parse(JSON.stringify(that.menus));
                    that.menuTreeSelect = toTree(menus);
                    that.menuTreeSelect.push({id: 0, label: "顶级菜单"});
                    this.dialogVisible = true;
                },
                toAddTop() {
                    let obj = {
                        id: 0,
                        name: "顶级类目"
                    };
                    this.toAdd(obj);
                },
                del(id) {
                    let that = this;
                    myConfirm("确定删除？", function () {
                        showLoading("保存中....");
                        let settings = {
                            type: "post",
                            url: BASE_PATH + "/menu/delete",
                            data: {id : id},
                            callback: function () {
                                hideLoading();
                                successMessage("删除成功！");
                                that.loadTableData();
                            }
                        };
                        myAjax(settings);
                    });

                },
                changeStatus(e,row) {
                    let mes = "";
                    if (e === 0 && row.children) {
                        mes = "禁用该菜单会连其所有子菜单一起禁用，";
                    }
                    let that = this;
                    myConfirm(mes + "确定提交？", function () {
                        showLoading("提交中...");
                        myAjax({
                            type: "post",
                            url: BASE_PATH + "/menu/updateStatus",
                            data: row,
                            isJson: true,
                            callback: function () {
                                hideLoading();
                                successMessage("提交成功！");
                                that.loadTableData();
                            },
                            errorCallback: function (error) {
                                errorMessage(error.responseJSON.message);
                                that.reSetStatus (e,row);
                            }
                        })
                    }, function () {
                        that.reSetStatus (e,row);
                    });
                },
                reSetStatus (e,row) {
                    /*let that = this;
                    let menus = JSON.parse(JSON.stringify(that.menus));
                    for (let i = 0; i < menus.length; i++) {
                        if(menus[i].id === row.id) {
                            menus[i].status = (e === 1 ? 0 : 1);
                            break;
                        }
                    }
                    this.tableData = toTree(menus);*/
                    // 不知道为啥不行， 先请求刷新
                    this.loadTableData()
                }

            },
            created:function () {
                this.loadTableData();
                this.showButtonAdd = parent.checkPermissionByName("菜单添加");
                this.showButtonUpdate = parent.checkPermissionByName("菜单修改");
                this.showButtonDelete = parent.checkPermissionByName("菜单删除");
            },
        })
    </script>
</body>
    <style>
        .icons li{
            list-style: none;
            display:inline-block;
        }
    </style>
</html>
